<template>
	<div class="basic_wrap">
		<div class="red_top_bg">
			<div class="back_left" @click="$router.back()"></div>
			<div class="big_tit">{{ item.title }}</div>
		</div>
		<div class="item_info_bg"></div>
		<div class="block_div item_info info1">
			<div class="title">
				{{ item.title }}
			</div>
			<div class="detail">
				<van-cell-group :border="false">
					<van-cell :title="item.type == 1 ? $t('index.dailyRate') : $t('index.rate')" value-class="value_class"
						:border="false" :value="item.rate + '%'" />
					<van-cell :title="$t('invest.cycle')" value-class="value_class" :border="false"
						:value="item.day + (item.type == 3 ? $t('index.hour') : $t('index.day'))" />
					<van-cell :title="$t('invest.num')" value-class="value_class" :border="false"
						:value="item.num" />
					<van-cell :title="$t('invest.amount')" value-class="value_class" :border="false"
						:value="common.currency_symbol_basic() + common.precision_basic(item.min)" />
					<van-cell :title="$t('invest.type')" value-class="value_class" :border="false"
						:value="$t('index.method' + item.type)" />
					<van-cell :title="$t('invest.agencies')" value-class="value_class" :border="false"
						:value="item.agencies" />
				</van-cell-group>
				<div class="progress">
					<van-progress :percentage="item.progress" />
				</div>
			</div>
		</div>

		<!-- <div class="block_div proCharts" ref='charts'>
		</div> -->
		<div class="block_div iframe">
			<iframe
			  :src="src"
			  width="100%"
			  height="400px"
			/>
        </div>
		<div class="block_div item_detail">
			<div class="title">
				{{ $t('invest.detail') }}
			</div>
			<div class="content" v-html="item.content"></div>
		</div>
		<div class="basic_btn btn" @click="showPopup = true">
			{{ $t('invest.investNow') }}
		</div>
		<van-popup v-model:show="showPopup" position="bottom" closeable close-icon-position="top-left">
			<div class="item_info popup_info">
				<div class="title">
					{{ $t('invest.orderInfo') }}
				</div>
				<div class="detail">
					<van-cell-group :border="false">
						<van-cell :title="item.type == 1 ? $t('index.dailyRate') : $t('index.rate')" value-class="value_class"
							:border="false" :value="item.rate + '%'" />
						<van-cell :title="$t('invest.cycle')" value-class="value_class" :border="false"
							:value="item.day + (item.type == 3 ? $t('index.hour') : $t('index.day'))" />
						<van-cell :title="$t('invest.amount')" value-class="value_class" :border="false"
							:value="common.currency_symbol_basic() + common.precision_basic(item.min)" />
						<van-cell :title="$t('invest.type')" value-class="value_class" :border="false"
							:value="$t('index.method' + item.type)" />
						<van-cell v-show="user.login" :title="$t('invest.paymentType')" value-class="value_class"
							:border="false"
							:value="$t('user.fundingAccount') + ' (' + common.currency_symbol_basic() + common.precision_basic(user.balance) + ')'" />
					</van-cell-group>
				</div>
				<div class=" flex_center invest_detail_wrap">
					<div>
						{{ $t('invest.income') }} <span class="detail_money">{{ common.currency_symbol_basic() }}{{ income }}
						</span>
					</div>
					<div class="basic_btn sbtn" @click="submit">
						{{ $t('invest.submit') }}
					</div>
				</div>
			</div>
		</van-popup>
	</div>
</template>

<script>
import Vue from 'vue';
import bsHeader from '../../components/bsHeader.vue'
import Fetch from '../../utils/fetch'
import * as echarts from 'echarts';
import {
	Icon,
	Popup,
	Field,
	Cell,
	Progress,
	CellGroup
} from 'vant';
Vue.use(Icon).use(Popup).use(Field).use(Cell).use(Progress).use(CellGroup);
export default {
	name: "",
	components: {
		bsHeader
	},
	data() {
		return {
			data: [],
			item: {
				min: 0,
				type: 1,
				rate: 0,
				day: 0,
				progress: 0
			},
			user: [],
			src : "../html/page1.html",
			money: "",
			income: 0,
			showPopup: false,
			loading: false,
			upColor: '#ec0000',
			upBorderColor: '#8A0000',
			downColor: '#00da3c',
			downBorderColor: '#008F28',
			data0: [],
			data1: []
		};
	},
	created() {
		if (window.plus) {
			plus.navigator.setStatusBarBackground('#0F6EFF');
			plus.navigator.setStatusBarStyle('light');
		}
		this.$parent.footer('user', false);
	},
	mounted() {
		this.start();
	},
	methods: {
		start() {
			Fetch('/index/item_detail', {
				id: this.$router.history.current.params.code
			}).then(r => {
				this.item = r.data.item;
				this.user = r.data.user;
				if (!this.user.login) {
					this.$dialog.alert({
						closeOnClickOverlay: true,
						showConfirmButton: false,
						showCancelButton: false,
						message: this.$t('invest.loginFirst'),
					}).then(() => {
						this.$router.push({
							path: '/login'
						})
					}).catch(() => {
						this.$router.push({
							path: '/login'
						})
					});
					return false;
				}
				if (!this.user.mid || this.user.mid < this.item.vip) {
					this.$dialog.alert({
						closeOnClickOverlay: true,
						showConfirmButton: false,
						showCancelButton: false,
						message: "The VIP level must reach "+this.item.vip_name+" before you can invest in this project",
					}).then(() => {
						this.$router.push({
							path: '/invest'
						})
					}).catch(() => {
						this.$router.push({
							path: '/invest'
						})
					});
					return false;
				}
				this.change();
				this.data0 = this.splitData(this.item.k_data);
				//this.mycharts();
			})
		},
		change() {
			if (this.item.type == 1) {
				this.income = this.common.precision_basic(this.item.min * this.item.rate * this.item.day / 100);
			} else {
				this.income = this.common.precision_basic(this.item.min * this.item.rate / 100);
			}
		},
		recharge() {
			this.$dialog.alert({
				closeOnClickOverlay: true,
				showConfirmButton: true,
				showCancelButton: true,
				message: this.$t('user.rechargeTips'),
			}).then(() => {
				this.$router.push({
					path: '/service/3'
				})
			}).catch(() => {
				this.$router.push({
					path: '/service/3'
				})
			});
		},
		submit() {
			if (this.loading) return false;
			if (!this.user.login) {
				this.$toast(this.$t('invest.loginFirst'));
				return false;
			}
			if (this.user.limit) {
				var times = this.item.num;
				if (this.item.num >= 2) times = 2;
				this.$toast(this.$t('invest.investNum') + this.item.num + this.$t('utils.times' + times));
				return false;
			}
			if (this.user.balance - this.item.min < 0) {
				this.$toast(this.$t('invest.moneyNotEnough'));
				return false;
			}
			if (this.user.limit_today) {
				this.$toast(this.$t('invest.investNumEmpty'));
				return false;
			}
			this.loading = true;
			Fetch('/user/invest', {
				id: this.item.id
			}).then(r => {
				this.$router.replace('/invest/record');
			})

		},
		splitData(rawData) {
			const categoryData = [];
			const values = [];
			for (var i = 0; i < rawData.length; i++) {
				var arr = rawData[i].split(",");
				categoryData.push(arr.splice(0, 1)[0]);
				values.push(arr);
			}
			return {
				categoryData: categoryData,
				values: values
			};
		},
		calculateMA(dayCount) {
			var result = [];
			for (var i = 0, len = this.data0.values.length; i < len; i++) {
				if (i < dayCount) {
					result.push('-');
					continue;
				}
				var sum = 0;
				for (var j = 0; j < dayCount; j++) {
					sum += +this.data0.values[i - j][1];
				}
				result.push(sum / dayCount);
			}
			return result;
		},
		mycharts() {
			let myChart = echarts.init(this.$refs.charts, "macarons");
			myChart.setOption({
				title: {
					left: 0
				},
				grid: {
					left: '15%',
					right: '10%',
					bottom: '15%',
					top: "15%"
				},
				xAxis: {
					type: 'category',
					data: this.data0.categoryData,
					boundaryGap: false,
					axisLine: {
						onZero: false
					},
					splitLine: {
						show: false
					},
					min: 'dataMin',
					max: 'dataMax'
				},
				yAxis: {
					scale: true,
					splitArea: {
						show: true
					}
				},
				dataZoom: [{
					type: 'inside',
					start: 95,
					end: 100
				},
				{
					show: false,
					type: 'slider',
					top: '80%',
					start: 95,
					end: 100
				}
				],
				series: [{
					type: 'candlestick',
					data: this.data0.values,
					itemStyle: {
						color: this.upColor,
						color0: this.downColor,
						borderColor: this.upBorderColor,
						borderColor0: this.downBorderColor
					},
					markPoint: {
						label: {
							formatter: function (param) {
								return param != null ? Math.round(param.value) + '' : '';
							}
						},
						data: [{
							name: 'highest value',
							type: 'max',
							valueDim: 'highest'
						},
						{
							name: 'lowest value',
							type: 'min',
							valueDim: 'lowest'
						},
						{
							name: 'average value on close',
							type: 'average',
							valueDim: 'close'
						}
						],
						tooltip: {
							formatter: function (param) {
								return param.name + '<br>' + (param.data.coord || '');
							}
						}
					},
				}]
			});
		}
	}
};
</script>

<style lang="less" scoped>
.proCharts {
	margin-bottom: 10px;
	padding-top: 15px;
	height: 268px;
}

.basic_wrap {
	margin-bottom: 60px;
}

.red_top_bg {
	background: #0F6EFF;
	position: fixed;
	z-index: 10;
	box-shadow: unset;

	.back_left {
		background: url(../img/common/back.png) no-repeat center center;
		width: 30px;
		height: 22px;
	}

	.big_tit {
		color: #FFFFFF;
		left: 55px;
	}
}

.item_info_bg {
	background: #0F6EFF;
	width: 100%;
	height: 168px;
	border-radius: 0 0 30px 30px;
}

.progress {
	margin: 10px 16px;
}

.item_title {
	margin-top: 54px;
	line-height: 2;
	font-size: 16px;
	font-weight: bold;
	padding: 10px 20px;
}

.logo {
	margin-bottom: 10px;

	img {
		width: 100%;
	}
}

.item_info {
	margin-bottom: 10px;

	.title {
		padding: 15px 0 10px 15px;
		font-size: 16px;
		border-bottom: 1px solid #F7F7F7;
	}

	.detail {
		padding: 10px 0;
		line-height: 2;

		.value_class {
			font-weight: bold;
			color: #3CB371;
		}
	}
}

.info1 {
	margin-top: -116px;
}

.popup_info {
	.title {
		text-align: center;
		padding: 16px;
	}

	.invest_amount {
		color: #999;
		padding: 15px 20px 0 0;
		font-size: 14px;
	}

	.invest_detail_wrap {
		width: 100%;
		margin: 0;
		justify-content: space-between;
		padding: 15px;
		border-top: 1px solid #F7F7F7;

		.detail_money {
			color: #FF0000;
			font-weight: bold;
			font-size: 16px;
			margin-left: 5px;
		}

		.sbtn {
			width: unset;
			height: unset;
			line-height: unset;
			padding: 5px 15px;
		}
	}
}

.item_detail {
	margin-bottom: 20px;

	.title {
		padding: 15px 0 10px 15px;
		font-size: 16px;
		border-bottom: 1px solid #F7F7F7;
	}

	.content {
		padding: 10px 15px 15px 15px;
		line-height: 2;

	}
}

.btn {
	position: fixed;
	margin: auto;
	left: 0;
	right: 0;
	bottom: 10px;
	max-width: 400px;
	width: 80%;
	text-align: center;
}

/deep/ .van-cell {
	font-size: unset;
	padding: 5px 16px;
}
</style>
